﻿<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>Robert's Blog</title>
    <atom:link href="http://robertiagar.wordpress.com/feed/" rel="self" type="application/rss+xml" />
    <link>http://robertiagar.wordpress.com</link>
    <description>C#, WPF, life...</description>
    <lastBuildDate>Tue, 16 Mar 2010 18:13:06 +0000</lastBuildDate>
    <generator>http://wordpress.com/</generator>
    <language>en</language>
    <sy:updatePeriod>hourly</sy:updatePeriod>
    <sy:updateFrequency>1</sy:updateFrequency>
    <cloud domain="robertiagar.wordpress.com" port="80" path="/?rsscloud=notify" registerProcedure="" protocol="http-post" />
    <image>
      <url>http://www.gravatar.com/blavatar/c86da84090983cb55f5f0d2ab26b9d77?s=96&amp;d=http://s2.wp.com/i/buttonw-com.png</url>
      <title>Robert's Blog</title>
      <link>http://robertiagar.wordpress.com</link>
    </image>
    <atom:link rel="search" type="application/opensearchdescription+xml" href="http://robertiagar.wordpress.com/osd.xml" title="Robert's Blog" />
    <atom:link rel="hub" href="http://robertiagar.wordpress.com/?pushpress=hub" />
    <item>
      <title>Fake OS in WPF</title>
      <link>http://robertiagar.wordpress.com/2010/03/16/fake-os-in-wpf/</link>
      <comments>http://robertiagar.wordpress.com/2010/03/16/fake-os-in-wpf/#comments</comments>
      <pubDate>Tue, 16 Mar 2010 18:09:11 +0000</pubDate>
      <dc:creator>robertiagar</dc:creator>
      <category><![CDATA[WPF]]></category>
      <guid isPermaLink="false">http://robertiagar.wordpress.com/2010/03/16/fake-os-in-wpf/</guid>
      <description><![CDATA[Have you ever wondered how do some movies have such cool OS themes and such? Well I have and I think I found out how they do it. It’s either flash or how I’m trying to do it in WPF. WPFs easy ability to customize UI and pretty much everything else helps you to achieve [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=robertiagar.wordpress.com&blog=12313015&post=26&subd=robertiagar&ref=&feed=1" />]]></description>
      <content:encoded>
        <![CDATA[<p>Have you ever wondered how do some movies have such cool OS themes and such? Well I have and I think I found out how they do it. It’s either flash or how I’m trying to do it in WPF. WPFs easy ability to customize UI and pretty much everything else helps you to achieve this. I’ll try to come up with some UI and some working stuff.</p>
<p>This will be a perfect excuse to dive into Styling, Themes and such in WPF. It’ll be a learning experience for me as well, as I’m a relative new user to the technology. Stay tuned.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/robertiagar.wordpress.com/26/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/robertiagar.wordpress.com/26/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/robertiagar.wordpress.com/26/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/robertiagar.wordpress.com/26/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/robertiagar.wordpress.com/26/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/robertiagar.wordpress.com/26/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/robertiagar.wordpress.com/26/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/robertiagar.wordpress.com/26/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/robertiagar.wordpress.com/26/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/robertiagar.wordpress.com/26/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=robertiagar.wordpress.com&blog=12313015&post=26&subd=robertiagar&ref=&feed=1" />]]>
      </content:encoded>
      <wfw:commentRss>http://robertiagar.wordpress.com/2010/03/16/fake-os-in-wpf/feed/</wfw:commentRss>
      <slash:comments>0</slash:comments>
      <media:content url="http://1.gravatar.com/avatar/55518c2ee5942cde10b09a8fc6cdbf4f?s=96&amp;d=identicon&amp;r=G" medium="image">
        <media:title type="html">robertiagar</media:title>
      </media:content>
    </item>
    <item>
      <title>WPF Animation using DoubleAnimationUsingKeyFrames</title>
      <link>http://robertiagar.wordpress.com/2010/03/12/wpf-animation-using-doubleanimationusingkeyframes/</link>
      <comments>http://robertiagar.wordpress.com/2010/03/12/wpf-animation-using-doubleanimationusingkeyframes/#comments</comments>
      <pubDate>Fri, 12 Mar 2010 08:47:04 +0000</pubDate>
      <dc:creator>robertiagar</dc:creator>
      <category><![CDATA[Design]]></category>
      <category><![CDATA[WPF]]></category>
      <guid isPermaLink="false">http://robertiagar.wordpress.com/2010/03/12/wpf-animation-using-doubleanimationusingkeyframes/</guid>
      <description>
        <![CDATA[Every body knows that Windows Presentation Foundation provides better support for UI than WinForms does in .NET 3.5 (and RC .NET 4). 
You can make very beautiful application UI using Visual Studio 2008 (or the new Visual Studio 2010), but this requires very good knowledge of XAML or use other WPF design based application like [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=robertiagar.wordpress.com&blog=12313015&post=16&subd=robertiagar&ref=&feed=1" />]]>
      </description>
      <content:encoded>
        <![CDATA[<p align="justify">Every body knows that Windows Presentation Foundation provides better support for UI than WinForms does in .NET 3.5 (and RC .NET 4). </p>
<p align="justify">You can make very beautiful application UI using Visual Studio 2008 (or the new Visual Studio 2010), but this requires very good knowledge of XAML or use other WPF design based application like Microsoft Expression Blend. I for one don’t afford Blend and had to rely entirely on Visual Studio 2010. That’s my way of learning WPF design. Code and if I get no errors see what the code does.</p>
<p align="justify">In this post I’ll show how to make a button “disappear” from a window and come back using a Storyboard that contains a DoubleAnimationUsingKeyFrames.</p>
<div align="justify"><span id="more-16"></span></div>
<h3 align="justify">Setting up the window and button</h3>
<p align="justify">Right open up Visual Studio 2010 RC1 (Visual Studio 2008 Pro and Express editions will work just as well) and create a new project. From the New Project Window select Windows from your language of choosing and select a WpfApplication.</p>
<p align="justify"><a href="http://robertiagar.files.wordpress.com/2010/03/image1.png"><img style="display:inline;border-width:0;" title="image" border="0" alt="image" src="http://robertiagar.files.wordpress.com/2010/03/image_thumb1.png?w=244&#038;h=170" width="244" height="170" /></a></p>
<p align="justify">Visual Studio will create all the necessary files and open up your MainWindow.xaml in split mode (where you have the design at the top and the XAML at the bottom) with the following code:</p>
<p align="justify">&lt;Window x:Class=&quot;WpfAnimationUsingKeyFrames.MainWindow&quot;    <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; xmlns=&quot;<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;">http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</a>     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; xmlns:x=&quot;<a href="http://schemas.microsoft.com/winfx/2006/xaml&quot;">http://schemas.microsoft.com/winfx/2006/xaml&quot;</a>     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; Title=&quot;MainWindow&quot; Height=&quot;350&quot; Width=&quot;525&quot;&gt;     <br />&#160;&#160;&#160; &lt;Grid&gt; </p>
<p align="justify">&#160;&#160;&#160; &lt;/Grid&gt;    <br />&lt;/Window&gt;</p>
<p align="justify">Now lets add a button to our window. Add the following markup:</p>
<p align="justify">&lt;Button x:Name=”Move”    <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; Content=&quot;Move!&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; Margin=&quot;3&quot; Padding=&quot;10&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; HorizontalAlignment=&quot;Center&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; VerticalAlignment=&quot;Center&quot;&gt;     <br />&lt;/Button&gt;</p>
<p align="justify">We’re done with setting up the window. So for you should have the following result:</p>
<p align="justify"><a href="http://robertiagar.files.wordpress.com/2010/03/image2.png"><img style="display:inline;border-width:0;" title="image" border="0" alt="image" src="http://robertiagar.files.wordpress.com/2010/03/image_thumb2.png?w=244&#038;h=133" width="244" height="133" /></a></p>
<h3 align="justify">Setting up RenderTransform</h3>
<p align="justify">Now that we have our up we should add some RenderTransform properties to our button. We need to do this otherwise we won’t have what to animate in our storyboard when we’ll set up later.</p>
<p align="justify">Between your &lt;Button&gt; tags add the following markup:</p>
<p align="justify">&lt;Button.RenderTransform&gt;    <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;TranslateTransform/&gt;     <br />&lt;/Button.RenderTransform&gt;</p>
<p align="justify">Great! (Cheering up myself for typing this much so far) Now we have what to animate when we write our storyboard.</p>
<h3 align="justify">Setting up the Storyboard</h3>
<p align="justify">Now that we have our button and the button is ready to accept render transformations lets write the storyboard.</p>
<p align="justify">Right before the &lt;Grid&gt; tag (which is the opening tag for our grid) add the following markup:</p>
<p align="justify">&lt;Window.Resources&gt;    </p>
<p>&lt;/Window.Resources&gt;</p>
<p align="justify">We’ll define our storyboard in the windows resources. Not sure, but I think this is the only. If some WPF developer will scream in the comments that this is all wrong, sorry, but this is how it worked for me.</p>
<p align="justify">Moving on. Time to finally write the storyboard. I’ll write to whole markup and explain everything afterwards. It’s not complicated just bare with me on this. Between the Window.Resources tags write the following markup:</p>
<p align="justify">&lt;Storyboard x:Key=&quot;Move&quot;&gt;    <br />&#160;&#160;&#160; &lt;DoubleAnimationUsingKeyFrames BeginTime=&quot;00:00:00&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Storyboard.TargetName=&quot;Move&quot; Storyboard.TargetProperty=&quot;(UIElement.RenderTransform).(TranslateTransform.X)&quot;&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:00.0100&quot; Value=&quot;10&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:00.5000&quot; Value=&quot;-350&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:02.0000&quot; Value=&quot;-350&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:02.5000&quot; Value=&quot;10&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:02.0100&quot; Value=&quot;0&quot;/&gt;     <br />&#160;&#160;&#160; &lt;/DoubleAnimationUsingKeyFrames&gt;     <br />&lt;/Storyboard&gt;</p>
<p align="justify">Time for the explaining part. Hope I don’t get this wrong.    <br />So first of all the x:Key property of a storyboard is required in everything you declare in your windows resources. If you don’t do that you’ get an error.     <br />Every storyboard needs to contain an Animation. It’s the only child the container of a storyboard accepts. If you attempt to add a button to a storyboard you get an error.     <br />There are several animation’s depending on what kind of property values are your trying to animate. In this case we’re animating a Double value in the TranslateTransform’s X property, which is a Double. That’s why we have DoubleAnimation. The UsingKeyFrames is there because we are obviously using KeyFrames to animate. I’m using key frames because&#160; I’ve done some work in Adobe After Effects and I’m to animating with Key Frames.</p>
<p align="justify">The BeginTime property of the animation is when the animation starts. This property is a TimeSpan value. XAML is intelligent enough convert the “00:00:00” string to TimeSpan.     <br />Storyboard.TargetName sets the storyboard target to an element name, in this case to our Button which has x:Name property set to “Move”.     <br />Storyboard.TargetProperty sets the storyboard target property to a property of the element which has the name set in Storyboard.TargetName property. The value of this property is bit hard to add at first but when you know how to determine what type of property is any property will be easy. If you hover over property name in Visual Studio you get a tooltip that says the full length of the property.</p>
<p align="justify"><a href="http://robertiagar.files.wordpress.com/2010/03/image3.png"><img style="display:inline;border-width:0;" title="image" border="0" alt="image" src="http://robertiagar.files.wordpress.com/2010/03/image_thumb3.png?w=244&#038;h=133" width="244" height="133" /></a></p>
<p align="justify">Always remember to add the property into brackets (e.g. “(PropertyPath)” ). XAML will always convert to see it’s a correct property name and give an error if it’s not.    <br />Once you told the animation what element to target and what property of that element to animate, it’s time to set up the key frames.     <br />In the DoubleAnimationUsingKeyFrames tags add a SplineDoubleKeyFrame. You can add as many of these as you want.     <br />The KeyTime and Value properties say that at the value of the KeyTime, the Value of the property specified in the Storyboard.TargetProperty is the same with Value. The thing is that between “00:00:00” and “00:00:00.0100” the value animates to 10. At time “00:00:00.0050” you won’t have 0. You’ll have a value between 0 and 10. Pretty nice eh? The same principle applies to al SplineDoubleKeyFrame’s.</p>
<p align="justify">Now that we have defined our Storyboard it’s time to tell to button when to animate.</p>
<h3>Starting the Storyboard</h3>
<p align="justify">Just right before the end of &lt;/Button.RenderTransform&gt; tag add the following markup:    <br />&lt;Button.Triggers&gt;     <br />&#160;&#160;&#160; &lt;EventTrigger RoutedEvent=&quot;ButtonBase.Click&quot;&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;BeginStoryboard Storyboard=&quot;{Binding Source={StaticResource Move}}&quot;/&gt;     <br />&#160;&#160;&#160; &lt;/EventTrigger&gt;     <br />&lt;/Button.Triggers&gt; </p>
<p>Now when you click the button it will animate. Press F5 to debug and see what we have created.</p>
<p>The storyboard can be started in the Code-behind. If you want to add more code when you click the button you need set button’s Click event to an event handler. Remove the markup I told you to write above and modify the &lt;Button&gt; to show the following:    <br />&lt;Button x:Name=&quot;Move&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; Content=&quot;Move!&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; Margin=&quot;3&quot; Padding=&quot;10&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; HorizontalAlignment=&quot;Center&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; VerticalAlignment=&quot;Center&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; Click=&quot;Move_Click&quot;&gt;     <br />&#160;&#160;&#160; &lt;Button.RenderTransform&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;TranslateTransform/&gt;     <br />&#160;&#160;&#160; &lt;/Button.RenderTransform&gt;     <br />&lt;/Button&gt;</p>
<p>Now in the code-behind write to following code in Window Class:    <br />private void Move_Click(object sender, RoutedEventArgs e)     <br />{     <br />&#160;&#160;&#160; (Resources[&quot;Move&quot;] as Storyboard).Begin();     <br />}</p>
<p>Be sure to add the following reference in your using section:    <br />using System.Windows.Media.Animation; </p>
<h3>Done</h3>
<p>That’s it! You’re done. Hope you found this post helpful as I found it fun to write. If I made some mistakes in my explanations or if I said some wrong/stupid things please do say it in the comments.</p>
<p>Looking forward for some feedback.</p>
<h3>Full XAML with EventTriggers:    <br /></h3>
<p>&lt;Window x:Class=&quot;WpfAnimationUsingKeyFrames.MainWindow&quot;    <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; xmlns=&quot;<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;">http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</a>     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; xmlns:x=&quot;<a href="http://schemas.microsoft.com/winfx/2006/xaml&quot;">http://schemas.microsoft.com/winfx/2006/xaml&quot;</a>     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; Title=&quot;MainWindow&quot; Height=&quot;350&quot; Width=&quot;525&quot;&gt;     <br />&#160;&#160;&#160; &lt;Window.Resources&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;Storyboard x:Key=&quot;Move&quot;&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;DoubleAnimationUsingKeyFrames BeginTime=&quot;00:00:00&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Storyboard.TargetName=&quot;Move&quot; Storyboard.TargetProperty=&quot;(UIElement.RenderTransform).(TranslateTransform.X)&quot;&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:00.0100&quot; Value=&quot;10&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:00.5000&quot; Value=&quot;-350&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:02.0000&quot; Value=&quot;-350&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:02.5000&quot; Value=&quot;10&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:02.0100&quot; Value=&quot;0&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/DoubleAnimationUsingKeyFrames&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/Storyboard&gt;     <br />&#160;&#160;&#160; &lt;/Window.Resources&gt;     <br />&#160;&#160;&#160; &lt;Grid&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;Button x:Name=&quot;Move&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Content=&quot;Move!&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Margin=&quot;3&quot; Padding=&quot;10&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; HorizontalAlignment=&quot;Center&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; VerticalAlignment=&quot;Center&quot;&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;Button.RenderTransform&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;TranslateTransform/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/Button.RenderTransform&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;Button.Triggers&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;EventTrigger RoutedEvent=&quot;ButtonBase.Click&quot;&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;BeginStoryboard Storyboard=&quot;{Binding Source={StaticResource Move}}&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/EventTrigger&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/Button.Triggers&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/Button&gt;     <br />&#160;&#160;&#160; &lt;/Grid&gt;     <br />&lt;/Window&gt;</p>
<h3>Full XAML with Click Event &amp; Full Code-behind</h3>
<h5></h5>
<p><strong>XAML:</strong>     <br />&lt;Window x:Class=&quot;WpfAnimationUsingKeyFrames.MainWindow&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; xmlns=&quot;<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;">http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</a>     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; xmlns:x=&quot;<a href="http://schemas.microsoft.com/winfx/2006/xaml&quot;">http://schemas.microsoft.com/winfx/2006/xaml&quot;</a>     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; Title=&quot;MainWindow&quot; Height=&quot;350&quot; Width=&quot;525&quot;&gt;     <br />&#160;&#160;&#160; &lt;Window.Resources&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;Storyboard x:Key=&quot;Move&quot;&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;DoubleAnimationUsingKeyFrames BeginTime=&quot;00:00:00&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Storyboard.TargetName=&quot;Move&quot; Storyboard.TargetProperty=&quot;(UIElement.RenderTransform).(TranslateTransform.X)&quot;&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:00.0100&quot; Value=&quot;10&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:00.5000&quot; Value=&quot;-350&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:02.0000&quot; Value=&quot;-350&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:02.5000&quot; Value=&quot;10&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;SplineDoubleKeyFrame KeyTime=&quot;00:00:02.0100&quot; Value=&quot;0&quot;/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/DoubleAnimationUsingKeyFrames&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/Storyboard&gt;     <br />&#160;&#160;&#160; &lt;/Window.Resources&gt;     <br />&#160;&#160;&#160; &lt;Grid&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;Button x:Name=&quot;Move&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Content=&quot;Move!&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Margin=&quot;3&quot; Padding=&quot;10&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; HorizontalAlignment=&quot;Center&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; VerticalAlignment=&quot;Center&quot;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Click=&quot;Move_Click&quot;&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;Button.RenderTransform&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;TranslateTransform/&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/Button.RenderTransform&gt;     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; &lt;/Button&gt;     <br />&#160;&#160;&#160; &lt;/Grid&gt;     <br />&lt;/Window&gt;</p>
<p><strong>Code-behind:</strong><strong></strong> </p>
<p>using System.Windows;   <br />using System.Windows.Media.Animation; </p>
<p>namespace WpfAnimationUsingKeyFrames    <br />{     <br />&#160;&#160;&#160; /// &lt;summary&gt;     <br />&#160;&#160;&#160; /// Interaction logic for MainWindow.xaml     <br />&#160;&#160;&#160; /// &lt;/summary&gt;     <br />&#160;&#160;&#160; public partial class MainWindow : Window     <br />&#160;&#160;&#160; {     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; public MainWindow()     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; {     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; InitializeComponent();     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; } </p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; private void Move_Click(object sender, RoutedEventArgs e)    <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; {     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; (Resources[&quot;Move&quot;] as Storyboard).Begin();     <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; }     <br />&#160;&#160;&#160; }     <br />}<strong> </strong>//Removed unused using;    </p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/robertiagar.wordpress.com/16/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/robertiagar.wordpress.com/16/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/robertiagar.wordpress.com/16/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/robertiagar.wordpress.com/16/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/robertiagar.wordpress.com/16/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/robertiagar.wordpress.com/16/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/robertiagar.wordpress.com/16/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/robertiagar.wordpress.com/16/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/robertiagar.wordpress.com/16/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/robertiagar.wordpress.com/16/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=robertiagar.wordpress.com&blog=12313015&post=16&subd=robertiagar&ref=&feed=1" />]]>
      </content:encoded>
      <wfw:commentRss>http://robertiagar.wordpress.com/2010/03/12/wpf-animation-using-doubleanimationusingkeyframes/feed/</wfw:commentRss>
      <slash:comments>0</slash:comments>
      <media:content url="http://1.gravatar.com/avatar/55518c2ee5942cde10b09a8fc6cdbf4f?s=96&amp;d=identicon&amp;r=G" medium="image">
        <media:title type="html">robertiagar</media:title>
      </media:content>
      <media:content url="http://robertiagar.files.wordpress.com/2010/03/image_thumb1.png" medium="image">
        <media:title type="html">image</media:title>
      </media:content>
      <media:content url="http://robertiagar.files.wordpress.com/2010/03/image_thumb2.png" medium="image">
        <media:title type="html">image</media:title>
      </media:content>
      <media:content url="http://robertiagar.files.wordpress.com/2010/03/image_thumb3.png" medium="image">
        <media:title type="html">image</media:title>
      </media:content>
    </item>
    <item>
      <title>Cont-uri noi…</title>
      <link>http://robertiagar.wordpress.com/2010/03/01/cont-uri-noi/</link>
      <comments>http://robertiagar.wordpress.com/2010/03/01/cont-uri-noi/#comments</comments>
      <pubDate>Mon, 01 Mar 2010 16:12:10 +0000</pubDate>
      <dc:creator>robertiagar</dc:creator>
      <category><![CDATA[News]]></category>
      <guid isPermaLink="false">http://robertiagar.wordpress.com/2010/03/01/cont-uri-noi/</guid>
      <description>
        <![CDATA[În ultimele zile tot am vrut să-mi schimb cont-urile si să trec şi eu de la nickname-uri la un cont mai cum trebuie. Când voi putea schimba şi cont-ul de Yahoo! am să vă anunţ. Până atunci rămân actualele cont-uri.
UPDATE:
Am schimbat toate cont-urile mele. Nu le voi posta din motive de spamming, dar cei care [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=robertiagar.wordpress.com&blog=12313015&post=10&subd=robertiagar&ref=&feed=1" />]]>
      </description>
      <content:encoded>
        <![CDATA[<p>În ultimele zile tot am vrut să-mi schimb cont-urile si să trec şi eu de la nickname-uri la un cont mai cum trebuie. Când voi putea schimba şi cont-ul de Yahoo! am să vă anunţ. Până atunci rămân actualele cont-uri.</p>
<p>UPDATE:</p>
<p>Am schimbat toate cont-urile mele. Nu le voi posta din motive de spamming, dar cei care ma stiu le au deja.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/robertiagar.wordpress.com/10/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/robertiagar.wordpress.com/10/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/robertiagar.wordpress.com/10/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/robertiagar.wordpress.com/10/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/robertiagar.wordpress.com/10/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/robertiagar.wordpress.com/10/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/robertiagar.wordpress.com/10/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/robertiagar.wordpress.com/10/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/robertiagar.wordpress.com/10/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/robertiagar.wordpress.com/10/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=robertiagar.wordpress.com&blog=12313015&post=10&subd=robertiagar&ref=&feed=1" />]]>
      </content:encoded>
      <wfw:commentRss>http://robertiagar.wordpress.com/2010/03/01/cont-uri-noi/feed/</wfw:commentRss>
      <slash:comments>0</slash:comments>
      <media:content url="http://1.gravatar.com/avatar/55518c2ee5942cde10b09a8fc6cdbf4f?s=96&amp;d=identicon&amp;r=G" medium="image">
        <media:title type="html">robertiagar</media:title>
      </media:content>
    </item>
  </channel>
</rss>